<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        .wrap {
            width: 300px;
            height: 200px;
            border: 1px solid #ccc;
            position: absolute;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, .3)
        }
        
        h1 {
            width: 100%;
            text-align: center;
            height: 100px;
            line-height: 100px;
            text-align: center;
        }
        
        .btns {
            display: flex;
            justify-content: space-around;
        }
    </style>
</head>

<body>
    <!-- <div class="wrap">
        <h1>标题</h1>
        <div class="btns">
            <button>确定</button>
            <button>取消</button>
        </div>
    </div> -->
    <script>
        class Movediv {
            constructor(option) {
                this.option = option;
                this.init()
            }
            init() {
                //创建div
                this.creatdiv()

                //点击事件
                this.event()
            }

            //创建div
            creatdiv() {
                    this.el = document.createElement('div');
                    this.el.classList.add('wrap');

                    let {
                        title,
                        btns
                    } = this.option;
                    this.el.innerHTML = ` <h1>${title}</h1>
                                      <div class="btns">
                                         ${btns.map(i=>`<button>${i}</button>`).join('')}
                                      </div>`

                document.body.appendChild(this.el)
            }

            //点击事件
            event(){
                let btns = [...this.el.querySelectorAll('button')];
                //console.log(btns)
                Array.from(btns).forEach((i,index)=>{
                    i.onclick = this.option[`cb${index}`].bind(this)
                })
            }
        }

        new Movediv({
            title: '确定是否删除',
            btns: ['确定', '取消'],
            cb0() {
                console.log('第一个按钮确定')
                document.body.removeChild(this.el);
            },
            cb1() {
                console.log('第二个按钮取消')
            }
        })


        class Copydiv extends Movediv{
            constructor(option){
                super(option)
                this.drag()
            }
            drag(){
                this.el.onmousedown = (e)=>{
                    let {x,y}={x:e.clientX-this.el.offsetLeft,y:e.clientY-this.el.offsetTop}
                    document.onmousemove = (event)=>{
                        let {left,top}= {left:event.clientX-x,top:event.clientY-y};
                        console.log(left,top)
                        this.el.style.left = `${left}px`;
                        this.el.style.top = `${top}px`
                    }
                }
                this.el.onmouseup = ()=>{
                    document.onmousemove = null
                }
            }
        }

        new Copydiv({
            title: '确定是否删除',
            btns: ['确定', '取消'],
            cb0() {
                console.log('第一个按钮确定')
                document.body.removeChild(this.el);
            },
            cb1() {
                console.log('第二个按钮取消')
            }
        })
    </script>
</body>

</html>